<script setup lang="ts">
  import IconifyIcon from "@/components/IconifyIcon/index.vue";
  import { ArrowRight, Edit } from "@element-plus/icons-vue";
  import CxHeader from "@/components/CxHeader/index.vue";
  import { watch } from "vue";
  import { useRoute } from "vue-router";
 

  /** 用户模块列表 */
  const USERLIST = [
    { id: 0, name: "基本信息", path: "/user/info", icon: "ep:user" },
    { id: 1, name: "礼品兑换", path: "/user/gift", icon: "mdi:gift-outline" },
    {
      id: 2,
      name: "兑换记录",
      path: "/user/gift/order",
      icon: "ep:shopping-cart",
    },
    {
      id: 3,
      name: "订单记录",
      path: "/user/order",
      icon: "ep:shopping-cart",
    }
  ];

  const route = useRoute();
</script>

<template>
  <CxHeader />
  <div class="mt-[20px]">
    <div class="flex xl:w-[1200px] mx-auto">
      <!-- PC 侧边导航栏 -->
      <aside class="hidden w-[96px] md:block h-full md:sticky top-[97px]">
        <ul class="pl-0 list-none my-0">
          <router-link
            v-for="item in USERLIST"
            :to="item.path"
            class="no-underline"
          >
            <li
              class="h-[40px] text-[#777] text-center leading-[40px] font-bold text-[14px] rounded-[6px]"
              :class="route.meta.activePath === item.path ? 'active-path' : ''"
            >
              {{ item.name }}
            </li>
          </router-link>
        </ul>
      </aside>
      <!-- <a :href="" :key="item.id" class=" py-auto"> </a> -->
      <main class="flex-1 sm:ml-[40px] box-border px-[10px] md:px-0">
        <router-view />
      </main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .active-path,
  .router-link-active > li {
    background-color: #f3f3f3;
    color: #000;
  }
</style>
